@use "src/styles/variables" as *;

$button-radius: 6px;

.vm-button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: $font-size-small;
  font-weight: normal;
  text-transform: capitalize;
  color: $color-white;
  background: transparent;
  border: 1px solid transparent;
  border-radius: $button-radius;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: transform 0.2s, opacity 0.2s, background-color 0.2s;

  &:focus-visible {
    outline: 2px solid #006FEEFF;
    outline-offset: 2px;
  }

  &:active {
    transform: scale(0.97);
    opacity: 0.9;
  }

  &:disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  // Sizes
  &_small {
    padding: 4px 10px;
    line-height: 14px;

    svg {
      width: 14px;
    }
  }

  &_medium {
    padding: 6px 14px;
    line-height: 14px;

    svg {
      width: 16px;
    }
  }

  &_large {
    padding: 8px 20px;
    font-size: $font-size-medium;

    svg {
      width: 18px;
      line-height: 16px;
    }
  }

  // Icon only
  &_icon_only {
    aspect-ratio: 1;
  }

  $icon-sizes: (
    small: 4px,
    medium: 6px,
    large: 8px
  );

  @each $size, $padding in $icon-sizes {
    &_#{$size}.vm-button_icon_only {
      padding: $padding;
    }
  }

  // Color variants
  @mixin contained-button($name, $color, $text-color: $color-white) {
    &_contained_#{"" + $name} {
      background-color: $color;
      color: $text-color;

      &:hover:not(:disabled) {
        opacity: 0.8;
      }
    }
  }

  @mixin outlined-button($name, $border-color, $text-color: $border-color) {
    &_outlined_#{"" + $name} {
      background-color: transparent;
      border-color: $border-color;
      color: $text-color;

      &:hover:not(:disabled) {
        background-color: $color-hover-black;
        opacity: 0.8;
      }
    }
  }

  @mixin text-button($name, $text-color: $color-white) {
    &_text_#{"" + $name} {
      background-color: transparent;
      color: $text-color;

      &:hover:not(:disabled) {
        background-color: $color-hover-black;
      }
    }
  }

  $button-colors: (
    primary: $color-primary,
    secondary: $color-secondary,
    success: $color-success,
    warning: $color-warning,
    error: $color-error,
    gray: $color-text-secondary,
    white: $color-white
  );

  @each $name, $color in $button-colors {
    @include contained-button($name, $color, if($name == white, $color-black, $color-white));
    @include outlined-button($name, $color, if($name == white, $color-white, $color));
    @include text-button($name, if($name == white, $color-white, $color));
  }
}
